<template>
  <div class="caseComp">
    <div class="caseCompTitle">编辑被投诉单位</div>
    <el-form :model="info" :rules="rules" ref="ruleForm" label-width="140px">
      <el-form-item label="单位名称：" prop="complaintName">
        <el-input
          v-model="info.complaintName"
          clearable=""
          placeholder="请输入"
          class="caseCompTitleInput"
        ></el-input>
      </el-form-item>
      <el-form-item label="单位地址：" prop="address">
        <el-input
          v-model="info.address"
          clearable=""
          placeholder="请输入"
          class="caseCompTitleInput"
        ></el-input>
      </el-form-item>
      <el-form-item
        label="详细地址："
        prop="addressDetail"
        v-if="isHsUser() && activeName == 'PLAT'"
      >
        <el-input
          v-model="info.addressDetail"
          clearable=""
          placeholder="请输入"
          class="caseCompTitleInput"
        ></el-input>
      </el-form-item>
      <el-form-item label="负责人：" prop="managerName">
        <el-input
          v-model="info.managerName"
          clearable=""
          placeholder="请输入"
          class="caseCompTitleInput"
        ></el-input>
      </el-form-item>
      <el-form-item label="单位电话：" prop="tel">
        <el-input
          v-model="info.tel"
          clearable=""
          placeholder="请输入"
          class="caseCompTitleInput"
        ></el-input>
      </el-form-item>
      <el-form-item
        label="是否签订劳动合同："
        prop="isContract"
        v-if="isHsUser() && activeName == 'PLAT'"
      >
        <el-select
          v-model="info.isContract"
          width="100%"
          class="caseCompTitleInput"
          placeholder="请选择"
        >
          <el-option
            v-for="item in resolveStatus"
            :key="item.value"
            :label="item.name"
            :value="item.value"
          ></el-option>
        </el-select>
      </el-form-item>
      <el-form-item
        label="劳动合同用人单位："
        prop="contractCompany"
        v-if="isHsUser() && activeName == 'PLAT'"
      >
        <el-input
          v-model="info.contractCompany"
          clearable=""
          placeholder="请输入"
          class="caseCompTitleInput"
        ></el-input>
      </el-form-item>
    </el-form>
    <div class="caseCompBtn">
      <el-button
        type="primary"
        v-sdc
        :loading="isLoading"
        class="commonBut saveBtn"
        @click="save"
        >保存</el-button
      >
      <el-button type="default" v-sdc class="commonBut" @click="finish"
        >取消</el-button
      >
    </div>
  </div>
</template>
<script>
export default {
  name: 'caseDepartment',
  props: {
    childData: {
      type: Object,
      required: true,
      default() {
        return {}
      },
    },
  },
  data() {
    const checkPhoneOrTel = (rule, value, callback) => {
      let flag1 = 1
      let flag2 = 1
      if (!/^1[3456789]\d{9}$/.test(value)) {
        flag1 = 2
      }
      if (!/^(\d{3,4}-)?\d{7,8}$/.test(value)) {
        flag2 = 2
      }
      if (value) {
        if (flag1 == 2 && flag2 == 2) {
          callback(new Error('请输入正确的手机号或者座机号码'))
        } else {
          callback()
        }
      } else {
        callback()
      }
    }
    return {
      activeName: '',
      isLoading: false,
      resolveStatus: [
        { value: '是', name: '是' },
        { value: '否', name: '否' },
      ],
      info: {
        id: '',
        complaintName: '', //单位名称
        managerName: '', //项目性质
        tel: '', //单位电话
        address: '', //单位地址
        addressDetail: '', //详细地址
        isContract: '',
        contractCompany: '',
      },
      initInfo: {},
      rules: {
        tel: [{ validator: checkPhoneOrTel, trigger: 'blur' }],
      },
    }
  },
  mounted() {
    this.activeName = this.$route.query.activeName
    const {
      id,
      complaintName,
      managerName,
      tel,
      address,
      addressDetail,
      isContract,
      contractCompany,
    } = this.childData
    if (this.activeName == 'PLAT') {
      this.info = {
        id,
        complaintName,
        managerName,
        tel,
        address,
        addressDetail,
        isContract,
        contractCompany,
      }
    } else {
      this.info = { id, complaintName, managerName, tel, address }
    }

    this.initInfo = JSON.parse(JSON.stringify(this.info))
  },
  methods: {
    /**
     * @name: 保存修改
     * @Author: 471826078@qq.com
     */
    save() {
      this.$refs['ruleForm'].validate((valid) => {
        if (valid) {
          this.isLoading = true
          let params = { id: this.info.id }
          let flag = true
          for (let item in this.info) {
            if (this.info[item] != this.initInfo[item]) {
              flag = false
              params[item] = this.info[item]
            }
          }
          if (flag) {
            this.finish()
            return false
          }

          this.axios
            .post('api-r/rightbackpay/expand/edit', params)
            .then((res) => {
              if (!res.data.hasError) {
                this.$message({
                  type: 'success',
                  message: res.data.msg,
                })
                this.isLoading = false
                this.finish(1)
              } else {
                this.$message({
                  type: 'warning',
                  message: res.data.errorMsg,
                })
                this.isLoading = false
              }
            })
        }
      })
    },
    finish(index) {
      this.$emit('callback', { success: index == 1 ? true : false })
    },
  },
}
</script>
<style lang="less" scoped>
.caseComp {
  border: 1px solid #dcdfe6;
  background-color: #f8f9fb;
  padding: 15px;
  &Title {
    color: #009588;
    font-size: 14px;
    line-height: 30px;
    margin-bottom: 12px;
  }
  &List {
    line-height: 36px;
    height: 36px;
    font-size: 14px;
    color: #444;
    margin-bottom: 12px;
    &Title {
      display: inline-block;
      width: 85px;
      text-align: right;
    }
    &Input {
      width: calc(100% - 95px);
    }

    .input {
      width: calc(100% - 170px);
    }
  }
  &Btn {
    text-align: center;
    margin: 24px 0 10px;
    .el-button {
      width: 120px;
    }
  }
}
.caseCompListInput {
  width: calc(100%);
}
.caseCompListSelect {
  width: calc(100% - 95px);
}
</style>
